<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <mapOptions :viewer="viewer" />
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '../utils/mousePosition.js';
import mapOptions from '@funcComp/mapOptions';
import FlowLineMaterialProperty from './FlowLine2';

export default defineComponent({
  components: { mapOptions, DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      nowPostion: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
    },
    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      let osm = new Cesium.OpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
      });

      var terrainProvider = Cesium.createWorldTerrain();
      var viewer = new Cesium.Viewer('cesium-drawer', {
        imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        // imageryProvider: imgTileServiceImageryProviderCreator(),
        selectionIndicator: false,
        infoBox: false
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        // terrainProvider
      });

      this.viewer = viewer;
      var scene = viewer.scene;

      // viewer.scene.globe.depthTestAgainstTerrain = true;
      viewer.imageryLayers._layers.forEach(e => (e.show = false));

      //取消双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      //设置homebutton的位置
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56); //Rectangle(west, south, east, north)
      //设置初始位置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(110.2, 34.55, 3000000)
      });

      //开启深度检测
      //viewer.scene.globe.depthTestAgainstTerrain = true;

      const lls = [104, 30, 1000, 114, 30, 1000, 114, 50, 1000, 115, 20, 1000, 118, 30, 1000, 123, 10, 1000, 125, 40, 1000, 126, 30, 1000, 128, 50, 1000];

      function addPrimitive() {
        const positions = Cesium.Cartesian3.fromDegreesArrayHeights(lls);
        const geometry = new Cesium.SimplePolylineGeometry({
          positions,
          // width: 10.0,
          vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
          // vertexFormat: Cesium.PerInstanceColorAppearance.FLAT_VERTEX_FORMAT
        });
        const geometryInstances = new Cesium.GeometryInstance({
          id: 1,
          geometry,
          attributes: {
            color: new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
          }
        });

        const appearance = new Cesium.PerInstanceColorAppearance();
        const appearance1 = new Cesium.PerInstanceColorAppearance({
          flat: true,
          translucent: false,
          closed: true
        });

        const primitive = scene.primitives.add(
          new Cesium.Primitive({
            geometryInstances,
            appearance
          })
        );
      }

      // addPrimitive();

      function addEntities() {
        viewer.entities.add({
          name: 'PolylineTrail',
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights(lls),
            width: 3,
            material: new FlowLineMaterialProperty(Cesium.Color.YELLOW, 20000, 1)
          }
        });

        viewer.zoomTo(viewer.entities);
      }

      addEntities();

      this.onViewerInited(viewer);
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
</style>
